<template>
  <div class="deposit_box">
    <!-- 充值第二步 -->
    <div class="body vertical center body_sec">
      <nut-form label-position="top" ref="formRef" class="">
        <nut-form-item :label="t('rechargeRecord_page_method')">
          <div class="flex choose_bank">
            <div class="flex align_center choose_bank_l bank_way">
              <span class="bank_cicon">
                <ImgT :key="curDepositWay._payname" :src="`/imgs/payment/icon/icon_${curDepositWay._payname}.webp`" />
              </span>
              <span class="bank_cname"> {{ t(`api_${curDepositWay._payname}`) }} </span>
            </div>
          </div>
        </nut-form-item>
        <nut-form-item class="yh_item" :label="t('deposit_page_discount')">
          <div class="select_dis">
            <nut-menu>
              <nut-menu-item v-if="discountList.length == 0" v-model="form.discount" :options="baseDcList" @change="clickChoose" />
              <nut-menu-item v-else v-model="form.discount" :options="discountList" @change="clickChoose" />
            </nut-menu>
          </div>
          <!-- 选择优惠后 -->
          <div v-if="![3, 4].includes(form.discount) && form.discount" class="choose_yh">
            <div v-if="curDiscount.limit > 0">
              {{
                curDiscount.ratio > 0
                  ? t("deposit_page_upperLimit")
                  : t("deposit_page_giftAmount")
              }}：<nut-price :price="curDiscount.limit" size="small" style="color: #fff" :decimal-digits="0" thousands
                :need-symbol="false" />
            </div>
            <div v-if="curDiscount.ratio > 0">
              {{ t("deposit_page_giftRatio") }}：<span class="yh_right">{{ curDiscount.ratio }}%</span>
            </div>
            <div v-if="curDiscount.limit > 0">
              {{ t("deposit_page_multiple") }}：<span class="yh_right">{{ curDiscount.require }}X</span>
            </div>
            <div>
              {{ t("deposit_page_minimum") }}：<nut-price :price="curDiscount.threshold" size="small" style="color: #fff"
                :decimal-digits="0" thousands :need-symbol="false" />
            </div>
            <div v-if="curDiscount.up_limit > 0">
              {{ t("deposit_page_maximum") }}：<nut-price :price="curDiscount.up_limit" size="small"
                style="color: #8e82c2" :decimal-digits="0" thousands :need-symbol="false" />
            </div>
          </div>
          <!-- 首存100% 和 二存 -->
          <div v-if="[3, 4].includes(form.discount)" class="choose_yh">
            <template v-if="isShowDeatils">
              <div>
                {{ t("deposit_page_zsje") }}：<span class="yh_right">{{ t('deposit_page_dyyx') }} <a class="show_btn" @click="router.push('/deposit/prize')">{{t('club_page_ckxq')}}</a></span>
              </div>
              <div >
                {{ t("deposit_page_minimum") }}：<nut-price :price="curDiscount.threshold" size="small" :decimal-digits="0" thousands :need-symbol="false" />
              </div>
              <div >
                {{ t("deposit_page_giftRatio") }}：<span class="yh_right">{{ curDiscount.ratio }}%</span>
              </div>
              <div >
                {{ t("deposit_page_upperLimit") }}：<nut-price :price="curDiscount.limit" size="small" :decimal-digits="0" thousands :need-symbol="false" />
              </div>
              <div >
                {{ t("deposit_page_multiple") }}：<span class="yh_right">{{ curDiscount.require }}X</span>
              </div>
              <div >
                {{ t("promo_page_fuHuo") }}：
              </div>
              <div >
                {{ t("deposit_page_giftRatio") }}：<span class="yh_right">{{ curDiscount.save_ratio }}%</span>
              </div>
              <div >
                {{ t("deposit_page_multiple") }}：<span class="yh_right">{{ curDiscount.save_require }}X</span>
              </div>
              <div >
                {{ t("deposit_page_minimum") }}：<nut-price :price="curDiscount.save_trigger" size="small" :decimal-digits="0" thousands :need-symbol="false" />
              </div>
            </template>
            <div class="show_details_btn" @click="isShowDeatils = !isShowDeatils">
              {{isShowDeatils ? t('deposit_page_sqsm') : t('deposit_page_jjsm')}}
              <span :class="`icon_jt ${!isShowDeatils && 'icon_sq'}`"></span>
            </div>
          </div>
        </nut-form-item>
        <nut-form-item v-if="['usdt'].includes(curDepositWay._payname)" class="yh_item"
          :label="t('deposit_page_netWork')">
          <div class="select_dis">
            <nut-menu>
              <nut-menu-item v-model="form.network_type" :options="netWorkArr" />
            </nut-menu>
          </div>
        </nut-form-item>

        <!-- 银行卡充值独有 -->
        <nut-form-item v-if="curDepositWay._payname.indexOf('bankcard') > -1" :label="t('addBank_page_pChooseBank')">
          <div class="flex choose_bank">
            <div class="flex align_center choose_bank_l">
              <span class="bank_cicon" v-if="chooseBank.value">
                <ImgT :key="chooseBank.value" :src="`/imgs/bankIcon/bank_logo_${chooseBank.value}.webp`"
                  :alt="chooseBank.label" />
              </span>
              <span class="bank_cname"> {{ chooseBank.label }} </span>
            </div>
            <nut-button :bordered="false" class="change_btn button_color" @click="showChangeBank">
              {{ t("deposit_page_changeWay") }}
            </nut-button>
          </div>
        </nut-form-item>
        <nut-form-item class="last_item" :label="t('rechargeRecord_page_amount')">
          
          <!-- <nut-input :disabled="!pageLoaded" @blur="inputBlur" @input="validateInput" -->
           <nut-input v-if="pageLoaded" :disabled="!pageLoaded" @blur="inputBlur" @input="validateInput"
            v-model.trim="form.amount" :placeholder="t('deposit_page_enterMon')">
            <template #right>
              <a class="refresh_icon" @click="form.amount = ''">
                <iconpark-icon icon-id="shuaxin" size="1.5rem"></iconpark-icon>
              </a>
            </template>
          </nut-input>
          <div v-if="['usdt'].includes(curDepositWay._payname)" class="flex usdt_box">
            <span>USDT: {{ countUsdtMon() }}</span>
            <span class="button" @click="showModal = true">{{
              t("deposit_page_toExchange")
            }}</span>
          </div>
          <p v-show="isShowError" class="r_color">
            {{ t("deposit_page_minDeposit") }}:
            {{ verifyNumberComma(String(countMinMax().min)) }}
          </p>
        </nut-form-item>

        <div class="flex f_wrap kjje_div">
          <a class="kj_item" v-for="(item, index) in chooseMoneyArr" @click="chooseFastMon(item.value)" :key="index">
            {{ item.label }}
          </a>
        </div>
      </nut-form>
      <div class="txt" v-show="removeComma(form.amount) > 0">
        {{ t("deposit_page_arrival") }}：
        <nut-price :price="arriveAmount" size="small" style="color: #60d580" :decimal-digits="0" thousands
          :need-symbol="false" />
        {{ t("accountsRecord_page_dong") }}
      </div>
      <div class="btn_zone flex">
        <nut-button class="submit_btn button_color pointer" :disabled="loading" block @click="onSubmit">
          {{ t("deposit_page_rechargeNow") }}
        </nut-button>
      </div>
      <div class="cz_tips r_color">
        <div class="flex align_center justify_center tip">
          <span class="icon">
            <iconpark-icon icon-id="red" size=".875rem"></iconpark-icon>
          </span>
          <span> {{ t("deposit_page_depositTips") }} </span>
        </div>
      </div>
    </div>

    <!-- 选择银行弹窗 -->
    <chooseBankDialog ref="chooseBankModal" :isDepositBank="true" @selectBank="selectBank" />

    <!-- 交易所列表 -->
    <Modal v-model:visible="showModal" :title="t('deposit_page_exchange')">
      <div class="popup_body">
        <div class="form_card">
          <div class="form_container vertical">
            <div class="body flex">
              <div class="ex_list_item" v-for="(item, index) in exchangeArr" :key="index" @click="openWin(item.value)">
                <div class="icon">
                  <ImgT :key="index" :src="`/imgs/payment/usdt/logo${index + 1}.webp`" />
                </div>
                <span>{{ item.label }}</span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </Modal>

    <!-- 充值成功提示窗口 -->
    <Modal v-model:visible="successModal" :showClose="false" :title="t('home_page_smsTitle')">
      <div class="popup_body">
        <div class="form_card">
          <div class="form_container vertical">
            <div class="body vertical center">
              <div class="list_tip">{{ t("deposit_page_goToDeposit") }}</div>
            </div>
          </div>
        </div>
        <div class="submit_btn flex justify_center">
          <div class="button_color submit_confirm" @click="openNewPage">
            {{ t("home_page_confirm") }}
          </div>
        </div>
      </div>
    </Modal>
    <!-- 弹出绑定银行卡提示 -->
    <ShowBindDia v-model:visible="showBindModal" :showClose="false" />
  </div>
</template>

<script setup lang="ts">
import { useI18n } from "vue-i18n";
import { onMounted, onUnmounted, ref, watch, defineAsyncComponent } from "vue";
import { useRouter } from "vue-router";
import PKwebsocket from "@/lolo/Ws";
import { NetPacket } from "@/netBase/NetPacket";
import { Local } from "@/utils/storage";
import { showToast } from "@nutui/nutui";
import chooseBankDialog from "./chooseBankDialog.vue";
import ShowBindDia from "./showBindDia.vue";
import { removeComma, verifyNumberComma } from "@/utils/publicMethods";
import { storeToRefs } from "pinia";
import { User } from "@/store/user.ts";
import pinia from "@/store";

const Modal = defineAsyncComponent(() => import("@/components/Modal.vue"));
const { t } = useI18n();
const router = useRouter();
const { shopInfoData, bankCardInfoList } = storeToRefs(User(pinia));
const myBankList = ref([]);
const showBindModal = ref(false);
const chooseBankModal = ref();
const legalRecharge = ref<any>(Local.get("depositWayObj")?.legalRecharge || []);
const chooseWay = Local.get("curDepositWay");
const curDiscountData = Local.get("curDiscountData") || { id: 0 }; // 从我的优惠过来
const curDepositWay = ref(chooseWay); // 当前选择的充值方式
const curDiscount: any = ref({
  bind_card: 0, // 是否需要绑定银行卡
  discount_ID: 0,
  limit: 0,
  ratio: 0,
  require: 0,
  threshold: 0,
  up_limit: 0, // 最高参与金额
}); // 优惠
const usdtObj = ref({
  rate: 26540, // usdt 汇率,
});
const isShowError = ref(false);

// console.log('-----99', legalRecharge.value)
// 充值提交参数
const dataParams = {
  // country: 1,
  method: -1,
  discount: 0, // 优惠
  amount: "",
  bank: null, // 银行
  bankMethod: 100, // 银行支付方式，对应传给后端参数 type
  network_type: "", // usdt 独有
};

const form = ref(
  // 存款表单提交
  { ...dataParams }
);
const baseMtdList = {
  label: t("addBank_page_pChoose"),
  value: -1,
  minrecharge: 0,
  maxrecharge: 0,
  paymethod: "",
};
// 充值方式列表
const mtdList = ref<any>(
  Local.get("depositWayObj")?.legalRecharge || [{ ...baseMtdList }]
);
const baseDcList = [{ text: t("deposit_page_notOffer"), value: 0, limit: 999999 }];
const baseDcList1 = { text: t("deposit_page_notOffer"), value: 0, limit: 999999 };
const discountList = ref<any>([]); // 优惠列表
const loading = ref(false); // 是否提交中
const arriveAmount = ref<any>(0); // 到账金额
const successModal = ref(false);
const depositResult = ref({ url: "" });
const defaultMoneyArr = [
  { label: "100,000", value: 100000 },
  { label: "200,000", value: 200000 },
  { label: "500,000", value: 500000 },
  { label: "1,000,000", value: 1000000 },
  { label: "10,000,000", value: 10000000 },
  { label: "100,000,000", value: 100000000 },
];
const chooseMoneyArr =
  curDepositWay.value?.rechargelist.split(",")?.map((item: any) => {
    return {
      label: verifyNumberComma(String(item)),
      value: +item,
    };
  }) || defaultMoneyArr;

const chooseBank = ref({ label: "", value: "" }); // 选择的银行卡
const netWorkArr = [
  { text: t("deposit_page_chooseNetWork"), value: "" },
  { text: "TRC20", value: 1 },
  { text: "ERC20", value: 2 },
];
const showModal = ref(false);
// 交易所链接
const exchangeArr = [
  { label: "Binance", value: "https://www.binance.com/vi/price/tether/VND" },
  { label: "Coinbase", value: "https://www.coinbase.com/zh-cn/converter" },
  { label: "Gate.io", value: "https://www.gate.io/zh/crypto/buy?crypto=USDT&fiat=vnd" },
  { label: "Bybit", value: "https://www.bybit.com/fiat/trade/express/home" },
  { label: "OKX", value: "https://www.okx.com/zh-hans/price/tether-usdt" },
  { label: "HTX", value: "https://www.htx.com/zh-cn/fiat-crypto/one-trade/buy-usdt-vnd" },
];

const isShowDeatils = ref(true);

const inputBlur = () => {
  form.value.amount = verifyNumberComma(String(form.value.amount));
};
// 限制只能输入输入数字
const validateInput = () => {
  // 显示最低充值金额提示
  isShowError.value = form.value.amount < countMinMax().min;
  form.value.amount = form.value.amount.replace(/[^0-9]/g, "");
};
const openWin = (url: any) => {
  window.open(url);
};

// 计算预计到账金额
// 刮刮卡：比如这里充100000，按80%到账就是到账8w，再按8w参与优惠, 优惠是赠送100%  也就是再送8w
const countArriveMon = () => {
  let czMount = removeComma(form.value.amount); // 输入的充值金额
  let zsMon = 0; // 赠送的金额
  if (!curDiscount.value || !curDiscount.value?.discount_ID) {
    // 未选择优惠，刮刮卡充值方式，只到账 80%
    if (
      legalRecharge.value
        .find((item: any) => item._paymenttype === form.value.method)
        ?._payname.indexOf("scratchcard") > -1
    ) {
      arriveAmount.value = czMount * 0.8 + zsMon;
    } else {
      arriveAmount.value = czMount + zsMon;
    }
    return;
  }
  // 刮刮卡充值方式，只到账 80%
  if (
    legalRecharge.value
      .find((item: any) => item._paymenttype === form.value.method)
      ?._payname.indexOf("scratchcard") > -1
  ) {
    czMount = czMount * 0.8;
  }
  // 按比例赠送金额
  if (curDiscount.value.ratio > 0) {
    zsMon =
      czMount < curDiscount.value.threshold
        ? 0
        : czMount * (curDiscount.value.ratio / 100);
    // 最高赠送金额
    if (curDiscount.value.limit && zsMon > curDiscount.value.limit) {
      zsMon = curDiscount.value.limit;
    }
  } else {
    // 按金额
    zsMon = czMount < curDiscount.value.threshold ? 0 : curDiscount.value.limit;
  }
  arriveAmount.value = czMount + Number(zsMon);
};
// 计算usdt 金额
const countUsdtMon = () => {
  if (!usdtObj.value.rate) return;
  const num = removeComma(form.value.amount) / usdtObj.value.rate;
  return num.toFixed(2);
};

const clickChoose = (item: any) => {
  form.value.discount = item;
};

// 打开银行弹窗
const openChooseBank = () => {
  chooseBankModal.value.onCloseBank();
};
// 重置
const resetData = () => {
  // curDepositWay.value = { _payname: '' }
  // form.value = { ...dataParams }
  // mtdList.value = [{ ...baseMtdList }]
  // chooseBank.value = { label: '', value: '' }
  form.value.discount = curDiscountData?.discount_ID || curDiscountData?.id; // 从我的优惠带过来已选择的优惠
  form.value.method = curDepositWay.value._paymenttype;
};
// 获取充值信息
const getShopInfo = () => {
  const req = NetPacket.req_get_shop_info();
  PKwebsocket.instance.send(req, true);
};
const handleShopInfoRes = (rs: any) => {
  resetData();
  usdtObj.value.rate = rs.usdt_viet_rate;
  console.error('----返回', rs)
  discountList.value = [{ ...baseDcList1 }, ...rs.discount_list];
};

// 计算最低最高充值金额
const countMinMax = () => {
  const curObj = mtdList.value.find((item: any) => item.value === form.value.method);
  console.log("*****--", curObj, form.value.method);
  const monObj = {
    min: curObj?.minrecharge,
    max: curObj?.maxrecharge,
  };
  if (curObj?._payname?.toLowerCase() === "usdt") {
    monObj.min = Number(curObj.minrecharge) * usdtObj.value.rate;
    monObj.max = Number(curObj.maxrecharge) * usdtObj.value.rate;
  }
  return monObj;
};

const onSubmit = () => {
  // 如果是银行卡方式，需要选择银行
  if (
    legalRecharge.value
      .find((item: any) => item._paymenttype === form.value.method)
      ?._payname.indexOf("bankcard") > -1 &&
    !form.value.bank
  ) {
    return showToast.fail(t("paymentManagement_page_chBank"));
  }
  // 如果是usdt ，需要选择网络
  if (
    legalRecharge.value
      .find((item: any) => item._paymenttype === form.value.method)
      ?._payname.indexOf("usdt") > -1 &&
    !form.value.network_type
  ) {
    return showToast.fail(t("deposit_page_pleChooseNetWork"));
  }
  // 获取到当前支付方式的最低最高充值金额
  const curObj = mtdList.value.find((item: any) => item.value === form.value.method);
  console.log("&&&&&", curObj);
  const numMon = removeComma(form.value.amount);
  if (numMon < countMinMax().min) {
    return showToast.fail(
      t("deposit_page_minAmount", {
        minAmount: verifyNumberComma(String(curObj.minrecharge)),
      })
    );
  }
  if (numMon > countMinMax().max) {
    return showToast.fail(
      t("deposit_page_maxAmount", {
        maxAmount: verifyNumberComma(String(curObj.maxrecharge)),
      })
    );
  }
  // 已选择优惠的情况下，充值金额不能小于优惠参与金额
  if (form.value.discount && numMon < curDiscount.value.threshold) {
    return showToast.fail(
      t("deposit_page_min_discount", {
        minDis: verifyNumberComma(String(curDiscount.value.threshold)),
      })
    );
  }
  handleSubmit();
};

// 充值提交
const handleSubmit = () => {
  loading.value = true;
  const req = NetPacket.req_recharge_from_third();
  req.amount = removeComma(form.value.amount).toString();
  req.channel_type = form.value.method; // 接口返回的 paymenttype 值乘以100
  // req.bank_channel_type = legalRecharge.value.find((item: any) => item.paymenttype === form.value.method)?._payname.indexOf('bankcard') > -1 ? form.value.bank : 0; // 只有选择银行的时候才有，usdt 是 0
  req.bank_channel_type = 3; // 目前看h5 的全部是 3
  // @ts-ignore
  req.type = form.value.bankMethod; // 只有选择银行的时候才有，银行支付方式
  req.got_discount = form.value.discount;
  req.network_type = Number(form.value.network_type);
  PKwebsocket.instance.send(req, true, {
    callbackName: "msg_notify_recharge_from_third",
    callback: handleDepositSubmit,
  });
};
const handleDepositSubmit = (res: any) => {
  console.log("---", res);
  loading.value = false;
  // 如果充值成功打开钱包，如果充值失败返回至充值列表
  if (res.code === 0) {
    // code 0 成功
    // showToast.success(t('deposit_page_depSuccess'))
    form.value.amount = ""; // 重置
    Local.remove("curDiscountData"); // 重置
    depositResult.value = res;
    successModal.value = true;
    // if (res.url.indexOf('http') > -1 || res.url.indexOf('https') > -1) {
    //   setTimeout(() => {
    //     history.go(-2); // 回到之前跳转的页面
    //     window.open(res.url);
    //   }, 2000)
    // }
  } else {
    setTimeout(() => {
      router.push("/deposit");
    }, 2000);
    showToast.fail(t(res.msg || "deposit_page_depFail")); // 如 recharge_channel_type_is_not_supported
  }
};
const openNewPage = () => {
  const res = depositResult.value;
  if (res.url.indexOf("http") > -1 || res.url.indexOf("https") > -1) {
    // history.go(-2); // 回到之前跳转的页面
    router.push("/myWallet");
    window.open(res.url);
    successModal.value = false;
  }
};
// 选择快捷金额
const chooseFastMon = (e: any) => {
  if (!form.value.amount) {
    form.value.amount = "0";
  }
  form.value.amount = removeComma(form.value.amount) + e;
  form.value.amount = verifyNumberComma(String(form.value.amount));
};
// 更换银行弹窗
const showChangeBank = () => {
  openChooseBank();
};

// 选择银行
const selectBank = (e: any) => {
  form.value.bank = e.value;
  chooseBank.value = e;
};
// 获取已绑定的银行账号
const getMyBankList = () => {
  const req = NetPacket.req_bank_card_info_list();
  PKwebsocket.instance.send(req, true);
};
const handleMyBankList = (res: any) => {
  myBankList.value = res.bank_card_info_list || [];
};
watch(
  () => shopInfoData.value,
  (n) => {
    handleShopInfoRes(n);
    console.log("==充值列表==", n);
  }
);
watch(
  () => bankCardInfoList.value,
  (n) => {
    handleMyBankList(n);
    console.log("=提现列表==", n);
  }
);
// 切换优惠
watch(
  () => form.value.discount,
  (n) => {
    curDiscount.value = discountList.value.find((item: any) => item.discount_ID === n);
    countArriveMon();
    curDiscount.value =
      discountList.value.find((item: any) => item.discount_ID === n) || {};
    showBindModal.value = !!curDiscount.value.bind_card && !myBankList.value.length; // bind_card:1 的情况下未绑定银行卡需要跳转到绑定银行卡页面

    isShowDeatils.value = true; // 重置
  }
);
watch(
  () => form.value.amount,
  (n) => {
    if (n) {
      countArriveMon();
    }
  }
);

const pageLoaded = ref(false)
onMounted(() => {
  setTimeout(() => {
    getMyBankList();
    getShopInfo();
  }, 500);
  setTimeout(() => { // 奇怪的bug  PC-3115
    form.value.amount = ''
    pageLoaded.value = true
  }, 100)
});
onUnmounted(() => {
  Local.remove("curDiscountData"); // 重置
});
</script>

<style lang="scss" scoped>
.flex {
  display: flex;
}

.r_color {
  color: #e43939;
}

.popup_body {
  .form_card {
    padding: 24px 20px !important;
  }

  .body {
    color: #fff;
    //padding: 24px 20px;
    flex-wrap: wrap;
    justify-content: space-between;

    .ex_list_item {
      font-size: 14px;
      display: flex;
      flex-wrap: wrap;
      align-content: center;
      justify-content: center;
      width: 88px;
      height: 88px;
      background: #1d1c3c;
      border-radius: 8px;

      &:nth-child(n + 4) {
        margin-top: 20px;
      }

      .icon {
        width: 100%;
        text-align: center;

        img {
          width: 36px;
          height: 36px;
        }
      }
    }
  }
}

.deposit_box {
  color: #fff;
  overflow-y: auto;

  .body {
    padding: 16px 14px 40px;

    form {
      :deep(.nut-cell-group__wrap) {
        box-shadow: none;
        background: none;
        margin: 0;

        .nut-cell {
          background: none;
          padding: 0 !important;
          margin-bottom: 16px;

          &.last_item {
            margin-bottom: 10px;
          }

          &::after {
            border: none;
          }

          &.nut-form-item {
            .nut-form-item__label {
              padding-bottom: 8px;
              color: #fff;
              font-weight: 500;
            }

            .nut-input,
            .select_dis {
              width: 100%;
              //height: 44px;
              background: #1d1c3c;
              box-shadow: 0.5px 0.5px 1px 0px #333260 inset;
              border-radius: 8px;
              padding: 10px;

              .s-icon {
                width: 24px;
                height: 24px;
                background: url(/imgs/inputSuffix.webp) center no-repeat;
                background-size: 100%;
                transition: 0.3s;
              }

              &.active {
                .s-icon {
                  transform: rotate(180deg);
                }
              }

              .nut-menu__title-text {
                padding: 0;
              }
            }

            .usdt_box {
              justify-content: space-between;
              margin-top: 10px;

              .button {
                text-decoration: underline;
              }
            }
          }
        }
      }

      .choose_bank_l {
        align-items: center;
        width: 100%;
        height: 44px;
        padding-left: 12px;
        background: #1d1c3c;
        box-shadow: 0.5px 0.5px 1px 0px #333260 inset;
        border-radius: 8px;

        .bank_cicon {
          display: flex;
          align-items: center;
          justify-content: center;
          width: 24px;
          height: 24px;
          margin-right: 12px;
          border-radius: 50%;
          background: #fff;
          border: solid 1.5px #d6cdff;

          img {
            width: 22px;
            border-radius: 50%;
          }
        }

        .bank_cname {
          color: #fff;
          line-height: 16px;
        }

        &.bank_way {
          .bank_cicon {
            background: none;
            border: 0;

            img {
              width: 36px;
              height: 36px;
              border-radius: 0;
            }
          }

          .bank_cname {
            line-height: 39px;
          }
        }
      }

      .change_btn {
        margin-left: 10px;
        border-radius: 8px;
        font-size: 16px;
        color: #fff;
        text-align: center;
        width: 110px;
        height: 44px;
        line-height: 44px;
        padding: 0;
        border: 0;
      }
    }

    .bank-list-item {
      width: 100%;

      a {
        img {
          width: 30px;
          height: 30px;
        }
      }
    }

    .btn_zone {
      .submit_btn {
        margin: 32px auto 8px;
        border: 0;
        width: 319px;
        height: 44px;
        color: #fff;
        border-radius: 8px;

        &.fixed_bg {
          background-size: 100% 112%;
        }
      }
    }
  }

  .body_sec {
    .refresh_icon {
      display: inline-block;
      width: 24px;
      height: 24px;
    }

    .kjje_div {
      flex-wrap: wrap;

      .kj_item {
        width: 110px;
        height: 44px;
        line-height: 44px;
        text-align: center;
        margin-bottom: 9px;
        background: #1d1c3c;
        box-shadow: 0.5px 0.5px 1px 0px #333260 inset;
        border-radius: 8px;

        &:not(:nth-child(3n + 1)) {
          margin-left: 8px;
        }
      }
    }

    .txt {
      min-height: 21px;
      font-size: 14px;
      font-weight: 600;
      color: #1dba8b;
    }

    .cz_tips {
      font-size: 14px;
      font-weight: 400;
      text-align: center;

      .tip {
        min-height: 21px;
        line-height: 10px;
        align-items: center;
        justify-content: center;

        .icon {
          margin-right: 4px;
          display: inline-block;
          width: 14px;
          height: 14px;
        }
      }
    }

    .yh_item {
      :deep(.n-form-item-blank) {
        display: block;
      }

      .choose_yh {
        margin-top: 10px;
        font-size: 14px;
        color: #fff;
        min-height: 100px;
        padding: 14px;
        background: #1d1c3c;
        border-radius: 8px;

        .yh_right {
          color: #A8A8CA;
        }
        >div {
          margin-bottom: 8px;
        }
        &:deep(.nut-price--small) {
          font-size: 14px;
          color: #A8A8CA;
        }
        .show_btn {
          color: #5B6CFF;
          text-decoration: underline;
        }
        .show_details_btn {
          color: #5B6CFF;
          height: 44px;
          border-radius: 8px;
          background: #32305F;
          box-shadow: 0.5px 0.5px 1px 0px #595794 inset;
          display: flex;
          justify-content: center;
          align-items: center;
          margin: 0;
          .icon_jt {
            width: 8.5px;
            height: 9px;
            margin-left: 4px;
            background: url('/imgs/payment/icon_jt.webp') center no-repeat;
            background-size: 100%;
            transition: .3s;
            &.icon_sq {
              transform: rotate(180deg);
            }
          }
        }
      }

      :deep(.nut-menu) {
        .nut-menu__bar {
          background: transparent !important;
        }

        .nut-icon {
          color: #a8a8ca;
        }
      }
    }
  }
}

// 选择优惠
:deep(.nut-overlay) {
  top: 15px;
  background: rgba(0, 0, 0, 0.1);
}

:deep(.nut-menu) {
  .nut-popup {
    width: 347px;
    left: 14px;
    top: 16px;
    background: #1d1c3c;
    border-radius: 8px;

    * {
      color: #fff;
    }

    .nut-menu-item__content {
      padding: 0;

      .nut-menu-item__option {
        box-sizing: border-box;
        height: 48px;
        padding: 0 14px;
        border-bottom: 0.5px solid #333260;

        &.active {
          background: #333260;

          .nut-menu-item__span {
            display: none;
          }
        }
      }
    }
  }
}

// 成功提示弹窗
.popup_body {
  color: #fff;

  .form_card {
    padding: 16px 20px;
    color: #c0c2db;
    font-size: 13px;
    text-align: center;
  }

  .submit_confirm {
    width: 307px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 25px;
  }
}
</style>
